<template>
  <div>
    <div>
      <div style="display: flex;justify-content: space-between;margin-top: 10px">
        <div>
          <el-input size="mini" style="width: 300px;margin-right: 10px"
                    prefix-icon="el-icon-search"
                    v-model="gname" :disabled="showSortSearchVisible"
                    @keydown.enter.native="initGoodos"
                    clearable
                    @clear="initGoodos"
                    placeholder="请输入商品名称进行搜索...">
          </el-input>
          <el-button :disabled="showSortSearchVisible" size="mini"
                     type="primary" icon="el-icon-search" @click="initGoodos">搜索
          </el-button>
          <el-button type="primary" size="mini" @click="showSortSearchVisible= !showSortSearchVisible">
            <i :class="showSortSearchVisible?'fa fa-angle-double-up':'fa fa-angle-double-down'" aria-hidden="true"></i>
            商品分类搜索</el-button>
        </div>
      </div>
    </div>
    <div v-show="showSortSearchVisible" style="border: 1px solid #409eff;border-radius: 5px;box-sizing: border-box;padding: 5px;
  margin: 10px 0px">
      <el-row>
        <el-col :span="4">
          一级分类：
          <el-select size="mini" style="width: 120px;" v-model="searchValue.gsort1" placeholder="一级分类">
            <el-option
                v-for="item in sort1"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          二级分类：
          <el-input size="mini" style="width: 120px" prefix-icon="el-icon-edit"
                    v-model="searchValue.gsort2" placeholder="二级分类"></el-input>
        </el-col>
        <el-col :span="16">
          <el-button size="mini" @click="initGoodos">取消</el-button>
          <el-button @click="initGoodos('sortSearch')" size="mini" type="primary" icon="el-icon-search">搜索</el-button>
        </el-col>
      </el-row>
    </div>
    <div style="margin-top: 10px">
      <el-table
          :data="goodos"
          stripe
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          style="width: 100%">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            prop="id"
            label="商品编号"
            fixed
            align="center"
            width="80">
        </el-table-column>
        <el-table-column
            prop="gname"
            label="商品名称"
            align="left"
            width="100">
        </el-table-column>
        <el-table-column
            label="商品价格"
            align="left"
            width="100">
          <template scope="scope">
            <el-tag>{{scope.row.gprice}}元</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="gdesc"
            label="商品描述"
            align="left"
            width="240">
        </el-table-column>
        <el-table-column
            prop="gsort1"
            label="一级分类"
            align="left"
            width="100">
        </el-table-column>
        <el-table-column
            prop="gsort2"
            label="二级分类"
            align="left"
            width="100">
        </el-table-column>
        <el-table-column
            prop="gcount"
            label="商品库存"
            align="left"
            width="90">
        </el-table-column>
        <el-table-column
            label="冻结状态"
            align="left"
            width="90">
          <template scope="scope">
            <el-tag type="info" v-if="scope.row.gisFreeze==1">已冻结</el-tag>
            <el-tag type="info" v-else>未冻结</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            label="出售状态"
            align="left"
            width="90">
          <template scope="scope">
            <el-tag type="danger" v-if="scope.row.gisSell==1">已下架</el-tag>
            <el-tag v-else>在售中</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            label="操作"
            fixed="right"
            width="160">
          <template slot-scope="scope">
            <el-button :disabled="true" @click="resellGood(scope.row)" style="padding: 3px" size="mini" type="info">恢复上架</el-button>
            <el-button @click="deleteGood(scope.row)" style="padding: 3px" size="mini" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 10px;display: flex;justify-content: flex-end">
        <el-pagination
            background
            @current-change="currentChange"
            @size-change="sizeChange"
            layout='sizes, prev, pager, next, jumper, ->, total'
            :page-size="size"
            :page-sizes="[5,10,20,30,40]"
            :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "GoodHistory",
  data(){
    return {
      searchValue:{
        gsort1:'',
        gsort2:''
      },
      showSortSearchVisible:false,
      sort1: [{
        value: '女装男装',
        label: '女装男装'
      }, {
        value: '鞋类箱包',
        label: '鞋类箱包'
      }, {
        value: '护肤彩妆',
        label: '护肤彩妆'
      }, {
        value: '汇吃美食',
        label: '汇吃美食'
      }, {
        value: '手机数码',
        label: '手机数码'
      }],
      title:'',
      dialogVisible:false,
      loading:false,
      goodos:[],
      total:0,
      currentPage:1,
      size:5,
      gname:'',
      good: {
        id: null,
        gname: '',
        gprice: '',
        gcount: '',
        gdesc: '',
        gsort1: '',
        gsort2: '',
        gimgUrl: '',
      },
      rules:{
        gname: [{required: true, message: "请输入商品名称", trigger: 'blur'}],
        gprice: [{required: true, message: "请输入商品价格", trigger: 'blur'}],
        gcount: [{required: true, message: "请输入商品库存", trigger: 'blur'}],
        gdesc: [{required: true, message: "请输入商品描述", trigger: 'blur'}],
        gsort2: [{required: true, message: "请输入二级分类", trigger: 'blur'}],
        gimgUrl: [{required: true, message: "请输入图片地址", trigger: 'blur'}],
      }

    }
  },
  mounted() {
    this.initGoodos();
  },
  methods: {
    deleteGood(data){
      this.$confirm('确定要永久删除'+data.gname+'吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRequest('/good/history/'+data.id).then(resp=>{
          if (resp){
            this.initGoodos();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消该操作'
        });
      });
    },
    resellGood(data){
      this.$confirm('确定要重新上架'+data.gname+'吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.putRequest('/good/history/'+data.id).then(resp=>{
          if (resp){
            this.initGoodos();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消该操作'
        });
      });
    },
    sizeChange(size){
      this.size = size;
      this.initGoodos();
    },
    currentChange(currentPage){
      this.currentPage = currentPage;
      this.initGoodos();
    },
    initGoodos(type){
      this.loading = true;
      let url = '/good/history/?currentPage='+this.currentPage+'&size='+this.size;
      if (type && type == 'sortSearch'){
        if (this.searchValue.gsort1){
          url += '&gSort1='+this.searchValue.gsort1;
        }
        if (this.searchValue.gsort1){
          url += '&gSort2='+this.searchValue.gsort2;
        }
      }else {
        url += '&gName='+this.gname;
      }
      console.log(url);
      this.getRequest(url).then(resp=>{
        this.loading = false;
        if (resp){
          this.goodos = resp.data;
          this.total = resp.total;
        }
      })
    },
  }
}
</script>

<style scoped>

</style>